<template>
  <div class="index">
    <el-container class="layout-container-demo" style="height: 100vh">
      <el-aside width="200px">
        <el-scrollbar>
          <div class="logo">
            <div class="logo_img">
              <img src="../assets/logo.png" />
            </div>
            <div class="logo_title">智慧E区</div>
          </div>
          <el-menu
            v-for="(item, index) in menuList"
            :key="index"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            text-color="#fff"
          >
            <router-link :to="item.link">
              <el-menu-item class="menu_item">{{ item.name }}</el-menu-item>
            </router-link>
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-container>
        <el-header
          style="
            text-align: right;
            font-size: 12px;
            background-color: #fff;
            border-bottom: 1px solid #eee;
          "
        >
          <div class="rightTools">
            <RightTools @toFresh="freshRouter"></RightTools>
          </div>
          <div class="toolbar">
            <div class="userIcon">
              <img src="https://skygray.top/pic/images/2022/04/20/user.png" />
            </div>
            <span style="margin-left: 15px; font-size: 0.9rem">{{
              adminName
            }}</span>
            <el-dropdown style="margin-left: 15px">
              <el-icon
                style="margin-right: 8px; margin-top: 1px; cursor: pointer"
                ><setting
              /></el-icon>
              <template #dropdown>
                <el-dropdown-menu @click="loginOut">
                  <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <div class="breadcrumb">
            <Breadcrumb></Breadcrumb>
          </div>
          <router-view class="router_view" v-if="rootFresh"></router-view>
          <footer>
            <FooterInfo></FooterInfo>
          </footer>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { ref, Ref, nextTick } from "vue";
import { mainStore } from "../store/index";

import RightTools from "../components/RightTools.vue";
import Breadcrumb from "../components/Breadcrumb.vue";
import FooterInfo from "../components/FooterInfo.vue";

interface MenuItem {
  name: string;
  link: string;
}
export default {
  name: "Index",
  components: {
    RightTools,
    Breadcrumb,
    FooterInfo,
  },
  setup() {
    const store = mainStore();
    let rootFresh: Ref<boolean> = ref(true);
    //定义菜单列表
    const menuList: MenuItem[] = [
      {
        name: "公告管理",
        link: "/smart-e/admin/index/notice",
      },
      {
        name: "维修管理",
        link: "/smart-e/admin/index/repair",
      },
      {
        name: "投诉管理",
        link: "/smart-e/admin/index/complaint",
      },
      {
        name: "租赁管理",
        link: "/smart-e/admin/index/lease",
      },
      {
        name: "访客管理",
        link: "/smart-e/admin/index/visitor",
      },
      {
        name: "留言管理",
        link: "/smart-e/admin/index/messBord",
      },
      {
        name: "业主认证",
        link: "/smart-e/admin/index/auth",
      },
      {
        name: "用户管理",
        link: "/smart-e/admin/index/user",
      },
      {
        name: "登录日志",
        link: "/smart-e/admin/index/system",
      },
    ];
    //获取登录者ID名称
    let adminName: string = "admin";
    adminName = store.adminName || adminName;

    //触发刷新路由
    function freshRouter(): void {
      rootFresh.value = false;
      nextTick(() => {
        rootFresh.value = true;
      });
    }

    //退出登录
    function loginOut() {
      store.loginOut();
    }

    return {
      menuList,
      adminName,
      rootFresh,
      freshRouter,
      loginOut,
    };
  },
};
</script>

<style scoped>
a .el-menu-item {
  text-decoration: none;
  color: #fff;
}
.logo {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 60px;
  background-color: #545c64;
  text-align: center;
  color: #fff;
  border-bottom: 1px solid #fff;
}
.logo_img {
  width: 50px;
  height: 50px;
}
.logo_img img {
  width: 50px;
  height: 50px;
}
.logo_title {
  width: 120px;
  height: 50px;
  line-height: 50px;
  letter-spacing: 0.3rem;
  font-size: 20px;
  font-weight: 600;
}

.menu_item {
  display: flex;
  justify-content: center;
  width: 200px;
  height: 65px;
  font-size: 14px;
}
.rightTools {
  display: inline-block;
  position: relative;
  width: 20%;
  height: 100%;
}
.userIcon {
  width: 30px;
  height: 30px;
}
.userIcon img {
  width: 30px;
  height: 30px;
}
.el-main {
  background-color: #f0f2f5;
}
.breadcrumb {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 20px;
  background-color: #fff;
}
.router_view {
  box-sizing: border-box;
  margin: 5px auto;
  padding: 15px;
  width: 100%;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: #545c64;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  height: 100%;
  right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

a .router-link-active .router-link-exact-active .el-menu-item {
  color: #409eff;
}
</style>
